<template>
    <div class='periodical'>
        <el-form ref="form" class="resform" :model="form" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>banner图</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="banner图一">
                            <uploadItem @openimg='openimg' :item='form.banner' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="banner图二">
                            <uploadItem @openimg='openimg' :item='form.banner' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import uploadItem from "@/views/web/components/uploadItem";
import { selectLabels,selectColumns} from "@/api/pc.js"
export default {
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: {
            Authorization: "Bearer " + getToken()
        },
        // 图片弹窗
        dialogVisible:false,
        // 弹窗图片地址
        dialogImageUrl:'',
        form:{
            name:'',
            //-------
            // banner图片
            banner:{img1:'',img2:''},
            // 杂志社合作
            magazine:{input1:'',input2:'',img2:''},
            // 投稿流程
            contribution:{img1:'',},
            // 快速合规服务优势
            advantages_service:{input1:'',input2:'',input3:'',input4:'',},
            // 文章及合作保密性
            article:{img1:'',img2:''},
            // 成功案例
            index_success:{img1:'',img2:''},
            // -------
            // 底部
            periodical:{img1:'',img2:''},
            // 服务流程
            service:{img1:'',img2:''},
            // 文章保密
            article_confidentiality:{img1:'',img2:''},
            // 学术规范
            academic_norm:{img1:'',img2:''},
            // 服务保障
            service_guarantee:{img1:'',img2:''},
            // 成功案例
            confidentiality:{img1:'',img2:''},
            // sci快速录用服务
            quick_service:{img1:'',img2:''},
            // 业务特色
            business_features:{img1:'',img2:''},
            // 合作杂志社
            cooperative_magazine:{img1:'',img2:''},
            // 合作案例
            cooperation_cases:{img1:'',img2:''},
            // 合作优势
            cooperation_advantages:{img1:'',img2:''},
            // 合作模式
            cooperation_mode:{img1:'',img2:''},
            // 项目收益
            project_income:{img1:'',img2:''},
            // 联系我们
            contact:{img1:'',img2:''},
            // 关于
            about_us:{img1:'',img2:''},
            // 合作杂志社
            our_cooperative_magazine:{img1:'',img2:''},
            // 官方资源
            resources:{img1:'',img2:''},
            // 联系我们
            contact_us:{img1:'',img2:''},

        },
        fileList:[],

        // data:{
        //     banner:{},//banner图
        //     杂志社:'',
        //     交流合作:''
        // }
       }
    },
    components:{uploadItem},
    mounted(){
        // selectColumns({labelType:'banner'}).then(res=>{
        //     console.log(res)
        // })
        selectLabels({pageType:'index'}).then(res=>{
            console.log(res)
        })
    },
    methods:{
        setitem(){
            console.log("进来了")
        },
        // 打开全屏图片
        openimg(val){
            this.dialogImageUrl = val;
            this.dialogVisible = true;
        },
    }
}
</script>
<style lang='scss' scoped>
.periodical{
    width: 100%;
    height: 100%;
    padding: 20px;
}
.el-form-item {
    margin-bottom: 0;
}
.box-card{
    margin-bottom: 10px;
}
.imgbox{
    display: inline-block;
}
.mb10{
    margin-bottom: 10px;
}
</style>